<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="nav-back-icon">&lt;</text>
			</view>
			<view class="nav-title">商户资料</view>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-divider">|</text>
				<text class="nav-icon">⊙</text>
			</view>
		</view>
		
		<view class="container">
			<view class="blue-bg">
				
			</view>
    <view class="floating">
      <!-- 1. 商家信息（左右两端对齐） -->
      <view class="card info-card">
        <view class="row">
          <text class="label">负责人：</text>
          <text class="value right">张大美</text>
        </view>
        <view class="row">
          <text class="label">身份证号码：</text>
          <text class="value right">40365236541232563</text>
        </view>
        <view class="row">
          <text class="label">手机号：</text>
          <text class="value right">18893039203</text>
        </view>
        <view class="row">
          <text class="label">店名：</text>
          <text class="value right">大美汽修店</text>
        </view>
        <view class="row">
          <text class="label">工商营业执照号码：</text>
          <text class="value right">42523364674747464646</text>
        </view>
        <view class="row">
          <text class="label">经营区域：</text>
          <text class="value right">焦作市山阳区</text>
        </view>
        <view class="row">
          <text class="label">地址：</text>
          <text class="value right">山阳区迎宾路32号</text>
        </view>
      </view>

      <!-- 2. 商家简介（标题上、内容下，靠右对齐） -->
      <view class="card section-card">
        <view class="section-title">商家简介</view>
        <view class="section-body right-align">
          <text class="intro">这里是商家的简介，这里是简单的商家介绍，这里是简单的商家介绍，这里是简单的商家介绍，这里是简单的商家介绍。</text>
        </view>
      </view>

      <!-- 3. 身份证照片（两张） -->
      <view class="card section-card">
        <view class="section-title">身份证正反面照片</view>
        <view class="photos-row">
          <image src="/static/身份证正面.jpg" class="photo-img" mode="aspectFill"></image>
          <image src="/static/身份证反面.jpg" class="photo-img" mode="aspectFill"></image>
        </view>
      </view>

      <!-- 4. 营业执照 -->
      <view class="card section-card">
        <view class="section-title">营业执照</view>
        <view class="photos-row">
          <image src="/static/营业执照.jpg" class="photo-img" mode="aspectFill"></image>
        </view>
      </view>

      <!-- 5. 门店照片 -->
      <view class="card section-card">
        <view class="section-title">门店照片</view>
        <view class="photos-row">
          <image src="/static/门店照片.jpg" class="photo-img" mode="aspectFill"></image>
        </view>
      </view>
      <!-- 底部按钮（不悬浮，位于所有内容之后） -->
      <view class="bottom-btn" @click="goToEdit">修改</view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 返回主页
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    },
    // 跳转到编辑资料页面
    goToEdit() {
      uni.navigateTo({
        url: '/fk/MerchantProfileEdit/index'
      });
    }
  }
}
</script>

<style scoped>
/* 导航栏样式 */
.nav-bar {
  height: 120rpx;
  background: #1f78ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  z-index: 1000;
  box-sizing: border-box;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-left:active {
  transform: scale(0.95);
}

.nav-back-icon {
  color: #ffffff;
  font-size: 60rpx;
  font-weight: 200;
  line-height: 1;
}

.nav-title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  padding-left: 40rpx;
  flex: 1;
  text-align: center;
}

.nav-right {
  display: flex;
  align-items: center;
  background: rgba(1, 1, 1, 0.2);
  border-radius: 50rpx;
  padding: 10rpx 20rpx;
  gap: 16rpx;
}

.nav-icon {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
}

.nav-divider {
  color: #ffffff;
  font-size: 20rpx;
  opacity: 0.8;
}

.container {
  position: relative;
  min-height: 100vh;
  background-color: #f5f5f5;

}

.blue-bg {
  width: 100%;
  height: 300rpx;
  background: #1f78ff;
}

.floating {
  position: absolute;
  top: 20rpx; /* 调整位置，考虑导航栏高度 */
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
}

.card {
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  padding: 32rpx;
  box-sizing: border-box;
}

.row {
  display: flex;
  align-items: center;
}

.label {
  font-size: 26rpx;
  color: #666666;
  min-width: 180rpx;
}

.value {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
  margin-left: 24rpx;
}

.right { text-align: right; }
.right-align { align-items: flex-end; }

.info-card .row {
  padding: 12rpx 0;
  margin-bottom: 12rpx;
}

.info-card .label,
.info-card .value {
  line-height: 44rpx;
}

.info-card { margin-bottom: 24rpx; }
.section-card { margin-top: 24rpx; }

.section-title {
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 20rpx;
}

.section-body { line-height: 1.8; color: #666666; }

.photos-row {
  display: flex;
  justify-content: flex-start;
  gap: 24rpx;
}

.photo-img {
  width: 220rpx;
  height: 140rpx;
  border-radius: 12rpx;
  background-color: #f2f2f2;
}

.bottom-btn {
  width: 70%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  color: #ffffff;
  font-size: 30rpx;
  border-radius: 44rpx;
  background: linear-gradient(90deg, #3d7eff 0%, #1677ff 100%);
  box-shadow: 0 12rpx 32rpx rgba(22, 119, 255, 0.35);
  margin: 40rpx auto 20rpx;
}
</style>